<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
	</head>

	<body>
		<script src="./lib/vue-2.6.10/dist/vue.min.js"></script>
		<div id="app">
      <!-- v-if 的特点： 每次都会重新删除或创建元素 -->
      <!-- v-show 的特点： 每次不会重新删除或创建元素，只是切换了元素的display：none样式 -->
      
      <!-- v-if 有较高的切换性能消耗 -->
      <!-- v-show 有较高的初识渲染消耗 -->

      <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if -->
      <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-show -->
      <h3 v-if="flag">这时用v-if控制的元素</h3>
      <h3 v-show="flag">这时用v-show控制的元素</h3>

		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
          flag: false

				},
				methods: {
          add() {
            this.list.unshift({id: this.id, name: this.name})

          }
				}
			});
		</script>
	</body>
</html>
